@extends('admin.inc.base')
@section('content')
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <style type="text/css">
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
        .btn{margin:5px;}
    </style>


    <div style="" id="tagGroup">
        <div>
            <button class="addGroup btn btn-default btn-primary">添加标签组</button>
        </div>
        @foreach($data['cval'] as $key => $val )
        <div class="tag-item">
            @foreach($val[0] as $k => $v)
                <button class="btn btn-default tag">{{$v}}</button>
            @endforeach
            <button class="addTag btn btn-default btn-success">添加主标签</button>
            <button class="addSubTag btn btn-default btn-danger">添加下级标签</button>
            <div class="subTag">
                @foreach($val[1] as $k => $v)
                <button class="btn btn-default tag">{{$v}}</button>
                @endforeach
            </div>
        </div>
        @endforeach

    </div>






    <!-- 标签名字弹出框-->
    <div id="dialog-form" title="创建标签">
        <form>
            <fieldset>
                <label for="name">标签名字</label>
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                <input type="hidden" id="" value="" />
            </fieldset>
        </form>
    </div>



    <div>
        <button class="btn btn-default btn-warning" onclick="collectData();">保存</button>
    </div>


    <script type="text/javascript">
        $(function(){
            //对话框
            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 250,
                width: 350,
                modal: true,
                buttons: {
                    "确定": function() {
                        var name = $("#name").val();
                        if(action=='addTag') {
                            target.prepend("<button class='btn btn-default tag'>"+name+"</button>");
                        }else{
                            target.find(".subTag").append("<button class='btn btn-default tag'>"+name+"</button>");
                        }
                        $( this ).dialog( "close" );
                    },
                    "取消": function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {

                }
            });



            $(".addGroup").click(function(){
                $("#tagGroup").append("<div class='tag-item'><button class='addTag btn btn-default btn-success'>添加主标签</button><button class='addSubTag btn btn-default btn-danger'>添加下级标签</button><div class='subTag'></div></div>");
            });
            var target,action;
            $("#tagGroup").delegate('.addTag','click',function(){
                target = $(this).parent();
                action = 'addTag';
                $("#dialog-form").dialog('open');
            });
            $("#tagGroup").delegate('.addSubTag','click',function(){
                target = $(this).parent();
                action = 'addSubTag';
                $("#dialog-form").dialog('open');
            });

            $("#tagGroup").delegate(".tag","click",function(){
                $(this).remove();
            });


        });

        var tagData = [];
        function collectData(){
            console.log('collectData');
            tagData = [];
            $("#tagGroup>div").each(function(item,tag){
                var collect = [];
                if($(tag).hasClass("tag-item")){
                    var main = [];
                    var sub = [];
                    $(tag).children('button').each(function(){
                        if($(this).hasClass('tag')) {
                            main.push($(this).html());
                        }
                    });
                    collect.push(main);
                    $(tag).children('.subTag').children('button').each(function(){
                        if($(this).hasClass('tag')) {
                            sub.push($(this).html());
                        }
                    });
                    collect.push(sub);
                    tagData.push(collect);
                }
            });
            console.log();
            $.post('/administrator/config',{title:"标签",ckey:"tag",cval:JSON.stringify(tagData)},function(data){
                alert(data.message);
            });
        }
    </script>

@endsection